<template>
  <!---------------------- 规则说明弹窗 ----------------------
* @auto kyle
* @date 2020-7-28
* @inrto 个人中心头部 （主要用于个人中心，会员详情）
* @props list        规则列表
*        showDialog  弹窗显示状态
* @methods closed    关闭弹窗

  -->
  <van-dialog v-model="showDialog" class="rule-dialog" :show-confirm-button="showConfirmButton">
    <div class="dialog-box">
      <!-- {{ baseInfo.Description||"暂无说明" }} -->
      <div class="dialog-head" :style="{backgroundImage:'url('+require('@/assets/images/ruleDialog.png')+')'}">
        <p>{{ text }}</p>
      </div>
      <div class="dialog-content">
        <p v-for="(item,index) in list" :key="index" class="mb-50 fs-28">{{ item }}</p>
      </div>
      <div class="dialog-close-box">
        <span class="dialog-close" @click="colseDialog" />
      </div>
    </div>
  </van-dialog>
</template>

<script>
export default {
  name: 'RuleDialog',
  components: {
  },
  props: {
    list: { // 规则条款列表
      type: Array,
      required: true,
      default: function() {
        return []
      }
    },
    showDialog: {
      type: Boolean,
      required: true,
      default: false
    },
    text: {
      type: String,
      required: false,
      default: '规则说明'
    }
  },
  data() {
    return {
      showConfirmButton: false
    }
  },
  computed: {

  },
  methods: {
    colseDialog() {
      this.$emit('closed')
    }
  }
}
</script>
<style lang="scss" scoped>
// 规则弹窗
.rule-dialog{
  border-radius: 12px;
  background: transparent;
  .dialog-box{
    .dialog-head{
      height: 0;
      padding-top: 27%;
      background-size: 100% 100%;
      @include bg-primary;
      position: relative;
      p{
        position: absolute;
        font-size: 62px;
        font-weight: bolder;
        color: $colorF;
        top: 40px;
        left: 65px;
      }
    }
    .dialog-content{
      border-radius: 12px;
      padding: 35px 30px;
      margin-top: -20px;
      z-index: 2;
      position: relative;
      background: $colorF;
      max-height: 680px;
      overflow: scroll;
    }
    .dialog-close-box{
      text-align: center;
      margin-top: 30px;
      .dialog-close{
        display: inline-block;
        height: 70px;
        width: 70px;
        border-radius: 100%;
        color: $colorF;
        border: 5px solid currentColor;
        position: relative;
        &:before,&:after{
          content:'';
          width: 30px;
          height: 4px;
          background: currentColor;
          transform: rotate(45deg);
          position: absolute;
          top: 30px;
          left: 15px;
        }
        &:after{
          transform: rotate(-45deg);
        }
      }
    }
  }
}
</style>

